<template>
  <transition enter-active-class="animated slideInDown" leave-active-class="animated slideOutUp">
    <div class="am-nbfc menus-style" v-if="isShow">
      <slot name="menus"></slot>
      <slot></slot>
      <slot name="oper"></slot>
    </div>
  </transition>
</template>

<script>

export default {
  name: 'dg-collapse',
  data() {
    return {
      isShow: true
    }
  },
  computed: {
    screenWidth() {
      return this.$store.state.screenWidth;
    }
  },
  methods: {
    initMenus() {
      if(this.screenWidth <= 740) {
        this.isShow = false;
      }
    },
    autoFold() {
      this.isShow = !this.isShow;
    }
  },
  watch: {
    screenWidth(val) {
      if(val > 740 && !this.isShow) {
        this.isShow = true;
      } else if(val <= 740 && this.isShow) {
        this.isShow = false;
      }
    }
  },
  mounted() {
    this.initMenus();
  }
}
</script>

<style >
</style>